<template>
  <div>
    <a-modal
      top
      :title="title"
      :width="800"
      @ok="handleOk"
      :visible="visible"
      @cancel="handleCancel"
      cancelText="关闭">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline"  @keyup.enter.native="searchQuery">
          <a-row :gutter="24">

            <a-col :span="10">
              <a-form-item label="歌曲名字">
                <a-input placeholder="请输入名称" v-model="queryParam.songName"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="8">
                    <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                      <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                      <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                    </span>
            </a-col>

          </a-row>
        </a-form>
      </div>
      <!-- table区域-begin -->
      <!-- table区域-begin -->
      <div>
        <a-table
          size="small"
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          :scroll="{ y: 240 }"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
          @change="handleTableChange">
          <!-- 字符串超长截取省略号显示-->
          <template slot="avatarslot" slot-scope="text, record, index">
            <div class="anty-img-wrap">
              <a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="user"/>
            </div>
          </template>
        </a-table>
      </div>
      <!-- table区域-end -->
    </a-modal>
  </div>
</template>

<script>
  import {filterObj} from '@/utils/util'
  import { saveTopListSongs,editArtist } from '@/api/api'
  import {getAction,getFileAccessHttpUrl,postAction,putAction} from '@/api/manage'
  export default {
    name: 'SelectSongModel',
    data() {
      return {
        toplistId: "0",
        visible: false,
        title: '选择已有歌曲',
        placement: 'right',
        description: '',
        selectKeys: [],
        // 查询条件
        queryParam: {},
        columns: [
          {
            title: '封面',
            align: "center",
            width: '20%',
            dataIndex: 'avatar',
            scopedSlots: {customRender: "avatarslot"}
          },
          {
            title: '歌曲名称',
            align: "left",
            dataIndex: 'songName',
            width: '20%',
            ellipsis: true,
          },
          {
            title: '歌手',
            align: "center",
            width: '20%',
            dataIndex: 'artistId_dictText',
            ellipsis: true,
          },
          {
            title: '语种',
            align: "center",
            width: '20%',
            dataIndex: 'languageId_dictText',
            ellipsis: true,
          },
          {
            title: '流派',
            align: "center",
            width: '20%',
            dataIndex: 'genreId_dictText',
            ellipsis: true,
          },
        ],
        dataSource: [],
        // 分页参数
        ipagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        isorter: {
          column: 'createTime',
          order: 'desc',
        },
        loading: false,
        selectedRowKeys: [],
        selectedRows: [],
        url: {
          list: "/mus/toplist/querySongs",
          postUrl: "/mus/toplist/addSongs"
        },
        postParams: {
          toplistId: "",
          songIds: ""
        }
      }
    },
    methods: {
      handleOk() {
        const that = this;
        this.selectKeys = this.selectedRowKeys;
        var ids = "";
        for (var a = 0; a < this.selectedRowKeys.length; a++) {
          ids += this.selectedRowKeys[a] + ",";
        }
        console.log("选择的主键Keys:" + this.selectKeys);
        console.log("选择的主键ids:" + ids);
        let obj;
        if(this.toplistId==null){
          that.$message.success("歌单ID为空");
          return ;
        }else{
          this.postParams.toplistId = this.toplistId;
          this.postParams.songIds = ids;
          obj=saveTopListSongs(this.postParams);
        }
        obj.then((res)=>{
          if(res.success){
            that.$message.success(res.message);
            this.postParams = {}
            this.loadData(this.toplistId)
          }else{
            that.$message.warning(res.message);
          }
        }).finally(() => {
          return
        })
      },
      getAvatarView: function(avatar) {
        return getFileAccessHttpUrl(avatar)
      },
      searchQuery() {
        this.loadData(this.toplistId);
      },
      searchReset() {
        this.queryParam = {};
        this.loadData(this.toplistId);
      },
      handleCancel() {
        this.visible = false;
        this.$emit('ok');
      },
      loadData(id) {
        this.toplistId = id;
        this.visible = true;
        if(this.toplistId==null){
          return;
        }else {
          getAction(this.url.list, {
            toplistId: this.toplistId,
            ...this.getQueryParams()
          }).then((res) => {
            if (res.success) {
              this.dataSource = res.result.records;
              this.ipagination.total = res.result.total;
            }
          })
        }
      },
      getQueryParams() {
        var param = Object.assign({}, this.queryParam, this.isorter);
        param.field = this.getQueryField();
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
        return filterObj(param);
      },
      getQueryField() {
        //TODO 字段权限控制
      },
      onSelectAll(selected, selectedRows, changeRows) {
        if (selected === true) {
          for (var a = 0; a < changeRows.length; a++) {
            this.dataSource.push(changeRows[a]);
          }
        } else {
          for (var b = 0; b < changeRows.length; b++) {
            this.dataSource.splice(this.dataSource.indexOf(changeRows[b]), 1);
          }
        }
        // console.log(selected, selectedRows, changeRows);
      },
      onSelect(record, selected) {
        if (selected === true) {
          this.dataSource.push(record);
        } else {
          var index = this.dataSource.indexOf(record);
          //console.log();
          if (index >= 0) {
            this.dataSource.splice(this.dataSource.indexOf(record), 1);
          }

        }
      },
      onSelectChange(selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys;
        this.selectionRows = selectedRows;
      },
      onClearSelected() {
        this.selectedRowKeys = [];
        this.selectionRows = [];
      },
      handleDelete: function (record) {
        this.dataSource.splice(this.dataSource.indexOf(record), 1);
      },
      handleTableChange(pagination, filters, sorter) {
        //分页、排序、筛选变化时触发
        console.log(sorter);
        //TODO 筛选
        if (Object.keys(sorter).length > 0) {
          this.isorter.column = sorter.field;
          this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
        }
        this.ipagination = pagination;
        this.loadData(this.toplistId);
      }
    }
  }
</script>

<style scoped>

</style>